<template>
  <div class="coursehw-container">
    <div class="position">
      <span>当前位置：</span>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>数据查询</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/teacher/hwinfo' }"
          >作业情况查询</el-breadcrumb-item
        >
        <el-breadcrumb-item>查看详细情况</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="header">
      <el-input
        placeholder="请输入学生姓名"
        v-model="input"
        clearable
      ></el-input>
      <el-button type="primary" @click="searchbyname">查询</el-button>
      <el-button type="primary" @click="exporttoexcel">导出excel</el-button>
    </div>
    <div class="hwinfo-table">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="序号" width="150"></el-table-column>
        <el-table-column
          prop="courseid"
          label="课程ID"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="coursename"
          label="课程名称"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="hwid"
          label="作业ID"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="stuname"
          label="学生姓名"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="ishwsubmit"
          label="是否提交"
          width="150"
        ></el-table-column>
        <el-table-column prop="mark" label="评分" width="150"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="downloadhomework(scope.$index, scope.row)"
              >下载作业</el-button
            >
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >评分</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <pagination
        ref="pagination"
        :pagesize="pagesize"
        :total="total"
        v-if="total"
        @changepage="changetable"
      ></pagination>
    </div>
  </div>
</template>

<script>
const ExportJsonExcel = require("js-export-excel");
import { mapState } from "vuex";
import { download_file } from "@/api/download";
import requests from "@/api/request";
export default {
  name: "",
  data() {
    return {
      input: "",
      courseid: "",
      hwid: "",
    };
  },
  computed: {
    ...mapState({
      alldata: (state) => {
        return state.teacher.homeworkconcrete.tabledata;
      },
      tableData: (state) => {
        if (Array.isArray(state.teacher.homeworkconcrete.tabledata)) {
          if (
            state.teacher.homeworkconcrete.pagesize &&
            state.teacher.homeworkconcrete.currentpage
          ) {
            let currentpage = state.teacher.homeworkconcrete.currentpage;
            let pagesize = state.teacher.homeworkconcrete.pagesize;
            let tableData = state.teacher.homeworkconcrete.tabledata.slice(
              //实现分页
              (currentpage - 1) * pagesize,
              currentpage * pagesize
            );
            return tableData;
          } else {
            return state.teacher.homeworkconcrete.tabledata;
          }
        }
      },
      pagesize: (state) => {
        if (state.teacher.homeworkconcrete.pagesize) {
          return state.teacher.homeworkconcrete.pagesize;
        } else {
          //若无教师审批，则每页显示条数为0
          return 0;
        }
      },
      total: (state) => {
        if (state.teacher.homeworkconcrete.total) {
          return state.teacher.homeworkconcrete.total;
        } else {
          //若无教师审批，则总数返回为0
          return 0;
        }
      },
      currentpage: (state) => {
        if (state.teacher.homeworkconcrete.currentpage) {
          return state.teacher.homeworkconcrete.currentpage;
        } else {
          //若无教师审批，则总数返回为0
          return 0;
        }
      },
    }),
  },
  methods: {
    handleEdit(index, row) {
      this.$prompt("请输入评分", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^[0-9]{1,2}$|100/,
        inputErrorMessage: "请输入正确的分数！",
      })
        .then(({ value }) => {
          requests
            .post("/editmark", {
              stuname: row.stuname,
              courseid: row.courseid,
              coursename: row.coursename,
              hwid: row.hwid,
              mark: value,
            })
            .then(
              (res) => {
                if (res.status == 200) {
                  this.$Toast({
                    type: res.data.type,
                    content: res.data.msg,
                  });
                }
              },
              (error) => {
                return Promise.reject(new Error("获取服务器数据失败！"))
              }
            );
        })
        .catch(() => {
          this.$Toast({
            type: "warning",
            content: "评分取消！",
          });
        });
    },
    changetable(page) {
      this.$store.dispatch("changehwinfopage", page);
    },
    searchbyname() {
      if (this.input) {
        this.$store.dispatch("searchhwbyname", {
          stuname: this.input,
          courseid: this.courseid,
          coursename: this.tableData[0].coursename,
          hwid: this.hwid,
        });
      } else {
        this.$store.dispatch("gethwconcrete", {
          hwid: this.hwid,
          courseid: this.courseid,
        });
        this.$emit("changekey");
      }
    },
    async downloadhomework(index, row) {
      if (row.ishwsubmit == "是") {
        let teachername = localStorage.getItem("username");
        requests
          .post("/getfiletype", {
            courseid: row.courseid,
            stuname: row.stuname,
            hwid: row.hwid,
          })
          .then(
            (res) => {
              let filetype = res.data.filetype;
              const userdata = {
                courseid: row.courseid,
                coursename: row.coursename,
                teacher: teachername,
                hwid: row.hwid,
                stuname: row.stuname,
              };
              download_file(userdata, row.stuname + row.hwid + "." + filetype);
            },
            (error) => {
              return Promise.reject(new Error("获取服务器数据失败！"));
            }
          );
      } else {
        this.$Toast({
          content: "对不起，该学生还未提交作业！",
          type: "error",
        });
      }
    },
    exporttoexcel() {
      //表格数据
      const datalist = this.alldata;
      //表格配置
      let options = {};
      //数据表
      let datatable = [];
      if (datalist) {
        for (let i in datalist) {
          let obj = {
            序号: datalist[i].id,
            课程ID: datalist[i].courseid,
            课程名称: datalist[i].coursename,
            作业ID: datalist[i].hwid,
            学生姓名: datalist[i].stuname,
            是否提交: datalist[i].ishwsubmit,
            评分: datalist[i].mark,
          };
          datatable.push(obj);
        }
      }
      //表格名
      options.fileName =
        this.tableData[0].coursename + this.tableData[0].hwid + "提交情况表";
      options.datas = [
        {
          //表格数据源
          sheetData: datatable,
          //表单名
          sheetname: "sheet1",
          //表头名
          sheetHeader: [
            "序号",
            "课程ID",
            "课程名称",
            "作业ID",
            "学生姓名",
            "是否提交",
            "评分",
          ],
          //表列名
          sheetFilter: [
            "序号",
            "课程ID",
            "课程名称",
            "作业ID",
            "学生姓名",
            "是否提交",
            "评分",
          ],
        },
      ];
      //创建exportexcel实例对象
      let toexcel = new ExportJsonExcel(options);
      //调用保存方法
      toexcel.saveExcel();
    },
  },
  mounted() {
    this.hwid = this.$route.params["hwid"];
    this.courseid = this.$route.params["courseid"];
    this.$store.dispatch("gethwconcrete", {
      hwid: this.hwid,
      courseid: this.courseid,
    });
  },
};
</script>

<style lang="less" scoped>
.header {
  height: 50px;
  line-height: 50px;
  display: flex;
  margin-bottom: 10px;
  button {
    margin: 0 20px;
  }
}
.position {
  height: 30px;
  line-height: 30px;
  .el-breadcrumb {
    display: inline-block;
  }
  & > span {
    font-size: 16px;
  }
}
.pagination {
  margin-top: 20px;
  text-align: center;
}
</style>
